<template>
  <div id="echarts-amap" style="width: 100%; height: 100%">hhauahuaui</div>
</template>
<script>
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { ecdata, ecgeoCoordMap, ecpolygon } from "/src/assets/js/echartData";

export default {
  data() {
    return {
      centerPoint: [114.4395833335, 32.6], //地图展示中心位置
      zoom: 9, //地图缩放级别
    };
  },
  methods: {
    // 展示背景地图
    showMap() {
      var chartDom = document.getElementById("echarts-amap");
      this.myChart = echarts.init(chartDom);
      var myChart = echarts.init(chartDom);
      var option;
      var data = ecdata;
      var geoCoordMap = ecgeoCoordMap;
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      function renderItem(params, api) {
        var coords = ecpolygon;
        var points = [];
        for (var i = 0; i < coords.length; i++) {
          points.push(api.coord(coords[i]));
        }
        var color = api.visual("color");
        return {
          type: "polygon",
          shape: {
            points: echarts.graphic.clipPointsByRect(points, {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height,
            }),
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color),
          }),
        };
      }
      option = {
        backgroundColor: "transparent",
        title: {
          //   text: "全国主要城市空气质量",
          //   subtext: "data from PM25.in",
          //   sublink: "http://www.pm25.in",
          //   left: "center",
          //   textStyle: {
          //     color: "#fff",
          //   },
        },
        tooltip: {
          trigger: "item",
        },
        bmap: {
          center: this.centerPoint,
          zoom: this.zoom,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "geometry",
                stylers: {
                  visibility: "on",
                  color: "#113549ff",
                },
              },
              //   {
              //     featureType: "water",
              //     elementType: "labels",
              //     stylers: {
              //       visibility: "on",
              //     },
              //   },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#064f85",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#005b96",
                  lightness: 1,
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#00508b",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  color: "#056197",
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "on",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry.fill",
                stylers: {
                  color: "#029fd4",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#1a5787",
                },
              },
              {
                featureType: "districtlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "districtlabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                  weight: 3,
                },
              },

              {
                featureType: "district",
                elementType: "labels.text",
                stylers: {
                  fontsize: 20,
                },
              },
              {
                featureType: "district",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "district",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },

              {
                featureType: "city",
                elementType: "labels.icon",
                stylers: {
                  visibility: "on",
                },
              },
              {
                featureType: "city",
                elementType: "labels",
                stylers: {
                  visibility: "on",
                },
              },
              {
                featureType: "city",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "city",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },
              {
                featureType: "country",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "country",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },
              {
                featureType: "water",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "water",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },
            ],
          },
        },
        series: [
          {
            name: "降雨黄色色警戒",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              // 设置圆点大小
              return 16;
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#ddb926",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: "降雨红色警戒",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              return 18;
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#c2565d",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
          {
            type: "custom",
            coordinateSystem: "bmap",
            renderItem: renderItem,
            // itemStyle: {
            //   opacity: 0.5,
            // },
            itemStyle: {
              opacity: 0.5,
              borderWidth: 1, //设置外层边框
              borderColor: "#8ce0ec",
              shadowColor: "rgba(0,54,255, 1)",
              shadowBlur: 2,
            },
            animation: true,
            silent: true,
            data: [0],
            z: -10,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    creatBasin() {
      const wjbGeoJson = {
        wjb: require("/public/static/wangjiaba_border.json"),
      };
      echarts.registerMap("王家坝流域", { geoJSON: wjbGeoJson["wjb"] });
      const option = {
        series: [
          {
            type: "map",
            map: "王家坝流域",
            silent: true, // 图形是否不响应和触发鼠标事
            roam: false, // 鼠标缩放
            zoom: 1.01,
            itemStyle: {
              borderColor: "#14edfc",
              borderWidth: 5,
              areaColor: "rgba(0,0,0,0)",
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.showMap();

    // this.creatBasin();
  },
};
</script>

